<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>通用配置</title>
		<script src="../lib/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 500px"></div>
		<script>
			var mCharts = echarts.init(document.querySelector('div'))
            var xDataArry = ['小红', '小李', '小王', '校长', '小张', '小章', '小高']
            var yDataArry1 = [85, 132, 120, 128, 86, 129, 110]
			var yDataArry2 = [112, 123, 95, 102, 75, 85, 90]
			
            var option = {
                title:{
                    text:'成绩展示',
                    textStyle:{
                        color:'red'
                    }
                },
                // 提示
                tooltip:{
                    trigger:'item',
                    triggerOn:'click',
                    //formatter:'{b}的成绩是{c}'
                    formatter:function(arg){
                        return arg.name + '的分数是: ' + arg.data
                    }
                },
                // ECharts 提供的工具栏
                toolbox:{
                    feature:{
                        // 导出图片
                        saveAsImage:{},
                        // 数据视图修改
                        dataView:{},
                        // 数据还原功能
                        restore:{},
                        // 区域缩放
                        dataZoom:{},
                        // 动态图标类型切换
                        magicType:{
                            type:['bar','line']
                        }
                    }
                },
                // 对series进行匹配
                legend:{
                    data:['语文','数学']
                },
				xAxis: {
					type: 'category',
					data: xDataArry,
				},
				yAxis: {
					type: 'value',
				},
				series: [
					{
						name:'语文',
						type: 'bar',
                        data: yDataArry1
					},{
						
                        name:'数学',
                        type: 'bar',
                        data: yDataArry2
					}
				],
			}
			mCharts.setOption(option)
		</script>
	</body>
</html>
